import { useEcharts } from "@/hooks/useEcharts";
import * as echarts from "echarts";

const Comp = (props: any) => {
    const { data } = props;

    console.log(data, 'datadata')

    let option: echarts.EChartsOption = {
        color: [
            "#5470c6",
            "#91cc75",
            "#fac858",
            "#ee6666",
            "#73c0de",
            "#3ba272",
            "#fc8452",
            "#9a60b4",
            "#ea7ccc",
            "#7b68ee",
            "#87cefa",
            "#f0e68c",
            "#ffb6c1",
            "#98fb98",
            "#afeeee",
            "#ffa07a",
            "#dda0dd",
        ],
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: "vertical",
            type: "scroll",
            align: "right",
            x: "right",
            y: 80,
        },
        series: [{
            type: 'pie',
            radius: ['40%', '70%'],
            center: ["35%", "54%"],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 0,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center',
                formatter: "{b}\n ({c})单",
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 30,
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: (data || []).map((item: any) => ({ ...item, value: item.count }))
        }],
    };

    const [echartsRef] = useEcharts(option);
    return <div ref={echartsRef} style={{ height: '380px' }} />;
};

export default Comp;
